/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from 'react';
import { Pagination, Input, Row, Col, Image, Card, Divider, Layout, Spin} from 'antd';
import '../css/App.css';
import axios, { CancelTokenSource } from 'axios';
import {Link, Route, useParams} from 'react-router-dom';
import TopMenu from '../component/menu/top-menu'
import LeftMenu from '../component/menu/left-menu';
import BookDetail from '../component/BookDetail/book-detail'

import {pendingList} from '../web/aioxs/cancel-request'
import {createBrowserHistory} from 'history'


interface BookDetailDataProps {
  author: string,
  bookId: number,
  categoryName: string,
  chapterNum: number,
  coverImg: string,
  desc: string,
  title: string,
  update: {
            chapterId: number,
            chapterName: string,
            chapterStatus: string,
            time: string
        },
 word: string
}

interface List{
  author: string,
  bookId: number,
  categoryName: string,
  chapterStatus: string,
  coverImg: string,
  desc: string,
  title:string,
  word: string,
}

interface Iprops{
  bookDetailData:BookDetailDataProps,
  bookList:List[],
}

export default function BookDetailPage() {
    const params = useParams();
    console.log("Router.data:", params.id);
    const bookid:number = Number(params.id);
    
    // commond booklist data mock
    const bookList:List[] = [];
    const [RecommeBooks,SetRecommeBooks] = useState(bookList);

    const bookDetailData:BookDetailDataProps = {
      author: '',
      bookId: 0,
      categoryName: '',
      chapterNum: 0,
      coverImg: '',
      desc: '',
      title: '',
      update: {
        chapterId: 0,
        chapterName: '',
        chapterStatus: '',
        time: ''
      },
      word: ''
    };
    const [BookDetailData,SetBookDetailData] = useState(bookDetailData);

    
    // 加载时请求
    axios({
      url: 'http://yuenov.com:15555/app/open/api/book/getDetail',
      params: {bookId:bookid,},
    }).then(response=>{
      // 服务器忙碌
      if(response.data.result.code===1009){
        console.log("服务器繁忙");
        setTimeout(HttpRequest, 10000);//重新请求
        return;
      }
      // 请求成功，更新书籍信息
      else if(response.data.result.code===0){
        if(response.data.data.recommend!==[]){
          let NewItems: List[] =[] ;
          response.data.data.recommend.forEach((item: any) => {
            let NewItem: List = {
              author: item.author,
              bookId: item.bookId,
              categoryName: item.categoryName,
              chapterStatus: item.chapterStatus,
              coverImg: item.coverImg,
              desc: item.desc,
              title: item.title,
              word: item.word
            };
            NewItems.push(NewItem);
          });

          console.log("response.data.data.author:",response.data.data.author);
          let NewBookDetail:BookDetailDataProps = {
            author: response.data.data.author,
            bookId: response.data.data.bookId,
            categoryName: response.data.data.categoryName,
            chapterNum: response.data.data.chapterNum,
            coverImg: response.data.data.coverImg,
            desc: response.data.data.desc,
            title: response.data.data.title,
            update: {
              chapterId: response.data.data.update.chapterId,
              chapterName: response.data.data.update.chapterName,
              chapterStatus: response.data.data.update.chapterStatus,
              time: response.data.data.update.time
            },
            word: response.data.data.word
          };
          SetBookDetailData(NewBookDetail);
          SetRecommeBooks(NewItems);
          SetBookDetailData((prevState) =>{
            return prevState = NewBookDetail;
          });
          SetRecommeBooks((prevState) =>{
            return prevState = NewItems;
          });

          //console.log("bookList:",bookList);
          //console.log("RecommeBooks:",RecommeBooks);
          // forceUpdate();
        }
      }
    },(error)=>{
        console.log(error)
    })

    // 再次请求直到成功
    const isOn: boolean = false;
    const [IsOn,SetIsOn] = useState(isOn);
    const HttpRequest = ()=>{
      if(IsOn)
        return
      else{
        console.log("已经存在请求");
        SetIsOn(true);
        axios({
          url: 'http://yuenov.com:15555/app/open/api/book/getDetail',
          params: {bookId:bookid,},
        }).then(response=>{
          // console.log("书籍详情查询结果:", response.data);
          // console.log("书籍详情查询结果ma:", response.data.result.code);
          // 服务器忙碌
          if(response.data.result.code===1009 || response.data.result.code ===1009){
            console.log("服务器繁忙");
            setTimeout(HttpRequest, 10000);
            // throws(()=>{},"服务器忙碌");
            //forceUpdate();
          }
          // 请求成功，更新书籍信息
          else if(response.data.result.code===0){
            if(response.data.data.recommend!==[]){
              let NewItems: List[] =[] ;
              response.data.data.recommend.forEach((item: any) => {
                let NewItem: List = {
                  author: item.author,
                  bookId: item.bookId,
                  categoryName: item.categoryName,
                  chapterStatus: item.chapterStatus,
                  coverImg: item.coverImg,
                  desc: item.desc,
                  title: item.title,
                  word: item.word
                };
                NewItems.push(NewItem);
              });
              console.log("response.data.data.author:",response.data.data.author);
              let NewBookDetail:BookDetailDataProps = {
                author: response.data.data.author,
                bookId: response.data.data.bookId,
                categoryName: response.data.data.categoryName,
                chapterNum: response.data.data.chapterNum,
                coverImg: response.data.data.coverImg,
                desc: response.data.data.desc,
                title: response.data.data.title,
                update: {
                  chapterId: response.data.data.update.chapterId,
                  chapterName: response.data.data.update.chapterName,
                  chapterStatus: response.data.data.update.chapterStatus,
                  time: response.data.data.update.time
                },
                word: response.data.data.word
              };
              SetBookDetailData(NewBookDetail);
              SetRecommeBooks(NewItems);
              SetBookDetailData((prevState) =>{
                return prevState = NewBookDetail;
              });
              SetRecommeBooks((prevState) =>{
                return prevState = NewItems;
              });
            }
          }
          },(error)=>{
              console.log(error)
        })
      }
    }

    //点击推荐
    const OnClickRecommend = () => {
    }
    //点击主页
    const OnClickHome = () => {
    }

    // const Jump = (e:any,s:string,id:number) =>{
    //   console.log("点击书籍：", s,id);
    // }

    return (
      <div>
            <Layout>
              {/* 菜单 */}
              <Layout.Header className="header">
                <TopMenu OnClickRecommend={OnClickRecommend} OnClickHome={OnClickHome} />
              </Layout.Header>
              {/* 书籍详情 */}
              <Layout>
              {RecommeBooks.length===0?(<Spin />):(<BookDetail bookDetailData={BookDetailData} bookList={RecommeBooks} />)}
              </Layout>
            </Layout>
          
      </div>
    )
}
